const path = require('path')
const { defineConfig } = require('@vue/cli-service')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8083,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  configureWebpack: {
    cache: {
      type: 'filesystem'
    },
    output: {
      library: 'vueApp',
      libraryTarget: 'umd',
      filename: 'js/[name].[contenthash].js' // contenthash 只有在内容发生改变才会变
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash:10].css' // css 提取也可以这么命名文件名，只有在内容发生改变才会变
      })
    ],
    optimization: {
      moduleIds: 'deterministic', // 资源标识符 区分本地模块和第三方依赖，避免导入本地模块，第三方的打包名称发生变化。
      runtimeChunk: 'single', // 将 runtime 代码拆分为一个单独的 chunk。
      splitChunks: {
        cacheGroups: { // 将第三方库(library)提取到单独的 vendor chunk 文件中
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial' // 只有打包第三方库才初始化依赖
          },
          lodash: {
            name: 'chunk-lodash', // 拆分lodash为独立包
            priority: 20, // 优先级越高才不会被同一父目录的libs合并打包
            test: /[\\/]node_modules[\\/]_?lodash(.*)/,
            chunks: 'initial'
          },
          // 以下方式未经验证
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // 可以自定义规则
            // minChunks: 3, //  拆分前必须共享模块的最小 chunks 数
            priority: 5,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
})
